<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EventEmitter就是事件派发器</title>
</head>
<body>
    
</body>
</html>
<script>
    class EventEmitter{
        constructor(){
            // 维护事件及监听者
            this.listeners={}
        }
        // 事件注册
        on(type,callback){
            // 事件注册一定没有该type，此处就会添加一项属性到this.listeners对象中
            if(!this.listeners[type]){
                this.listeners[type]=[]
            }
            // 将回调函数放入该事件监听者
            this.listeners[type].push(callback)
        }
        // 发布事件
        emit(type,...args){
            if(this.listeners[type]){
                this.listeners[type].forEach(callback=>{
                    callback(...args)
                })
            }
        }
        // 移除事件监听
        off(type,callback){
            if(this.listeners[type]){
                // 记录要移除的事件在数组中的下标
                const targetIndex = this.listeners[type].findIndex(item=>item===callback)
                if(targetIndex!==-1){
                    this.listeners[type].splice(targetIndex,1)
                }
                if(this.listeners[type].length===0){
                    delete this.listeners[type]
                }
            }
        }   
        // 移除所有事件监听
        offAll(type){
            if(this.listeners[type]){
                delete this.listeners[type]
            }
        }
    }


    const ee = new EventEmitter()

    ee.on('imagine',function(){console.log('前端收割机')})
    ee.emit('imagine')

    ee.on('imagine',function(name,name2){console.log(`我的名字是${name},他是${name2}`)})
    ee.emit('imagine','山寰','啊啊啊')
</script>